<template>
  <div class="technology">
    <div class="tit">技术文章</div>
    <div class="navs">
      <ul>
        <li
          v-for="(item, index) in navs"
          :key="item.id"
          @click="setNavColor(item, index)"
          :class="item.checked ? 'checked' : ''"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="articles">
      <Article type="alltype" :typeId="id" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { findType } from "../api/api";
import Article from "@/components/article.vue";
export default defineComponent({
  name: "technology",
  components: {
    Article,
  },
  setup(props, ctx) {
    const navs: any = ref([]);
    const router = useRouter();
    const id: any = ref(0);
    onMounted(() => {
      findType()
        .then((data) => {
          const type = router.currentRoute.value.query.type;
          navs.value = data;
          data.forEach((val: any, index: number) => {
            if (type == val["id"]) {
              val["checked"] = true;
            } else {
              val["checked"] = false;
            }
          });

          if (type) {
            id.value = type;
          } else {
            data[0].checked = true;
            id.value = data[0].id;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    });

    function setNavColor(item: any, index: number) {
      navs.value.forEach((val: any, index: number) => {
        val["checked"] = false;
      });
      navs.value[index].checked = true;
      id.value = item.id;
      router.push("/technology?type=" + item.id);
    }

    return {
      navs,
      setNavColor,
      id,
    };
  },
});
</script>
<style lang="scss" scoped>
.technology {
  background-color: white;
  .tit {
    text-align: center;
    height: 0.8rem;
    font-weight: bold;
    line-height: 0.8rem;
  }
  .navs {
    ul {
      list-style: none;
      white-space: nowrap;
      overflow: auto;
      padding: 0.2rem 0;
      li {
        display: inline-block;
        width: 1.5rem;
        text-align: center;
      }
    }
    .checked {
      color: red;
    }
  }
}
</style>
